Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP03。

在經過前兩篇的專案設定調整後，本 EP 就要來繼續處理 TopStoreApp 的 訂單 畫面了。

根據原 TopStoreApp 的設計，在訂單頁面的畫面會是呈現某日有多少筆訂單的呈現效果，然後供使用者點選前往觀看該日的訂單資訊。

所以如果要完成此 "某日有多少筆訂單的呈現" 在 OrdersPage 上的話，最直接的就是設計一個 Model 跟在之前的 MockData 當中透過此 Model 設定一個集合後，再讓 OedersPage 透過其 ViewModel 去繫結。

首先，在 TopStoreApp 專案當中的 Models 設計一個類別 SummaryOrder，並撰寫下列程式碼：

using CommunityToolkit.Mvvm.ComponentModel;

namespace TopStoreApp.Models;

[INotifyPropertyChanged]
public partial class SummaryOrder
{
    public DateTime Summary { get; set; }

    public int Count { get; set; }
}

結果如下圖：

接著再找到 TopStoreApp 專案當中的 MockData 類別，在其中增加以下三段程式碼：

private readonly ObservableCollection<Models.SummaryOrder> summaryOrders;

summaryOrders = new ObservableCollection<Models.SummaryOrder>()
{
    new Models.SummaryOrder { Summary = DateTime.Parse("2023/08/04") , Count = 9 },
    new Models.SummaryOrder { Summary = DateTime.Parse("2023/08/03") , Count = 7 },
    new Models.SummaryOrder { Summary = DateTime.Parse("2023/08/02") , Count = 5 },
    new Models.SummaryOrder { Summary = DateTime.Parse("2023/08/01") , Count = 3 },
    new Models.SummaryOrder { Summary = DateTime.Parse("2023/07/31") , Count = 4 },
};

public ObservableCollection<Models.SummaryOrder> GetSummaryOrders(DateTime? dateTime = null)
{
    return summaryOrders;
}

結果如下圖：

由於在先前的為了能夠在假資料(MockData)與真實資料(SQLiteDB)中切換，有做一些特殊的規劃與設計，有興趣的朋友請參考 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 的文章內容。

因此在這邊為了延續此切換設計，就來在 IDataService 當中設計 GetSummaryOrders 的介面方法宣告，並暫時在 DataService 當中先寫上未完成實作的方法。

在 IDatatService 介面中：

ObservableCollection<Models.SummaryOrder> GetSummaryOrders(DateTime? dateTime = null);

結果如下圖：

在 DatatService 類別中：

public ObservableCollection<SummaryOrder> GetSummaryOrders(DateTime? dateTime = null)
{
    throw new NotImplementedException();
}

結果如下圖：

好的，下一回就來設計 OrderPages 與其 ViewModel 囉~~~